<template>
  <div>
    <van-notice-bar v-show="photoList.length === 0" color="#e6a23c" background="#fdf6ec" left-icon="info-o" style="margin-top: 0.4rem;">
      此用户图库为空，请联系工作人员
    </van-notice-bar>
    <van-skeleton
      style="margin-top:2rem"
      title
      animate
      :round="true"
      :row="14"
      :row-width="[300,280,300,200,0,300,280,300,200,0,300,280,300,200]"
      :loading="loading">
      <van-grid
        style="padding-top:.4rem"
        :column-num="2"
        :border="false"
        square>
        <van-grid-item
          v-for="(item,index) in photoList"
          :key="index"
          @click.stop="checkLibrary(item)"
          >
          <div class="center" style="flex-direction: column;">
              <van-image
                width="4rem"
                height="4rem"
                :src="item.pics[0].pics_big_url"
                fit="cover"
              />
              <!-- <van-divider /> -->
              <!-- <van-tag plain type="primary" color="#409eff" size="medium">{{item.goods_name}}</van-tag> -->
              <span class="text">{{item.goods_name}}</span>
          </div>
        </van-grid-item>
      </van-grid>
    </van-skeleton>
  </div>
</template>

<script>
export default {
  name: 'v-library',
  data() {
    return {
      loading: false,
      // 图片列表
      nameList: [],
      photoList: [],
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 100
      }
    }
  },
  filters: {
    timeFilter(value) {
      var date = new Date(value)
      var YY = date.getFullYear()
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      return YY + '年' + MM + '月' + DD + '日'
    }
  },
  created() {
    var urlData = this.$route.query
    this.queryInfo.query = urlData.user
    this.getData()
  },
  mounted() {
    // var urlData = this.$route.query
    // this.queryInfo.query = urlData.user
    // this.getData()
  },
  methods: {
    checkLibrary(data) {
      // console.log(data, '点击的数据')
      this.$router.push(`photo?id=${data.goods_id}`)
    },
    getData() {
      this.loading = true
      this.$http.get(`goods`, { params: this.queryInfo }).then(res => {
        if (res.data.meta.status !== 200) return this.$toast.fail('发生未知，无法获取数据，联系工作人员')
        // console.log(res.data, '获取的数据')
        this.nameList = res.data.data.goods
        this.nameList.forEach(e => {
          this.$http(`goods/${e.goods_id}`).then(res => {
            if (res.data.meta.status !== 200) return false
            this.photoList.push(res.data.data)
          })
        })
        // console.log(this.photoList)
        this.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.text{
  margin-top: 0.3rem;
  font-size: 0.32rem;
  color:#999
}
/deep/.van-image__img{
  border-radius: 0.4rem !important;
}
</style>
